<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>充值申请</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/City.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/order.css" />
    <style>
        .dis_flex{display: flex;}
        .dis_flex div{flex: 1;text-align: center;padding: .5rem 0;border-bottom:1px solid #dbdbdb; }
        .dis_flex div:last-child{border-left:1px dashed #ababab;}
        .recharge>input{padding: .1rem .3rem;border: 1px solid #ababab!important;text-align: center;width: 90%!important;margin:.3rem auto!important;}
        .rechange_common{padding: .3rem 0;width: 94%;margin-left:3%;line-height: 1.2rem;}
        .rechange_red{color:red;}
    </style>
</head>          
<body>
    <div class="page-group ms-controller" :controller="chongzhi">
        <div class="page page-current">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left" href="javascript:window.history.go(-1)"></a>
                <a class="icon icon-home pull-right" href="/H5"></a>
                <h1 class="title">充值申请</h1>
            </header>
            <div class="content" style="background-color: white;">
                <div class="list-block" style="margin-top:0">
                    <div class="dis_flex"><div :on-click="@choose=0">支付宝</div>
                        <!--<div :on-click="@choose=1">微信</div>-->
                    </div>
                     <div :if="@choose==0" class="recharge">
                         <!--<input type="text" :duplex="@account_0" placeholder="请输入支付宝账号" style="padding: .1rem .3rem;border: 1px solid #ababab!important;text-align: center;width: 90%!important;margin:.3rem auto!important;">-->
                         <input type="text" :duplex="@remit_money_0" placeholder="请输入充值金额" style="padding: .1rem .3rem;border: 1px solid #ababab!important;text-align: center;width: 90%!important;margin:.3rem auto!important;">
                         <div class="rechange_common" style="border-bottom:1px dashed #d0d0d0;">
                             请转账到以下支付宝账号，并提交转账截图！
                            <!-- <div>支付宝真实姓名：威哥</div>
                             <div>支付宝账号：13640929681</div>-->
                         </div>
                         <div class="rechange_common">
                             <div>支付宝真实姓名：杨琦</div>
                             <div>支付宝账号：13640929681</div>
                             <div class="rechange_red">（打款明细截图必须是带有流水号的）</div>
                         </div>
                         <div style="padding-left: .5rem;">*添加支付截图信息（限一张）</div>
                     </div>

                    <div :if="@choose==1" class="recharge">
                        <!--<input type="text" :duplex="@account_1" placeholder="请输入微信号" style="padding: .1rem .3rem;border: 1px solid #ababab!important;text-align: center;width: 90%!important;margin:.3rem auto!important;">-->
                        <input type="text" :duplex="@remit_money_1" placeholder="请输入充值金额" style="padding: .1rem .3rem;border: 1px solid #ababab!important;text-align: center;width: 90%!important;margin:.3rem auto!important;">
                        <div class="rechange_common" style="border-bottom:1px dashed #d0d0d0;">
                            请转账到以下微信账号，并提交转账截图！
                          <!--  <div>微信名1：威哥</div>
                            <div>微信2：18761196264</div>-->
                        </div>
                        <div class="rechange_common">
                            <div>微信名：杨琦</div>
                            <div>微信：:188 1856 8135</div>
                            <div class="rechange_red">（打款明细截图必须是带有流水号的）</div>
                        </div>
                        <div style="padding-left: .5rem;">*添加支付截图信息（限一张）</div>
                    </div>
                    <div style="position: relative;width: 4.5rem;height: 4rem;padding-left: .5rem;margin-top: .5rem;">
                        <img src="/H5/images/add_img.png" style="width: 100%;height: 100%;" alt="" id="img">
                        <input type="file" id="file" :change="newimg" accept="image/png,image/jpeg" style="position: absolute;top:0;left:0;width:100%;height: 100%;opacity: 0;">
                        <input style="display: none" type="text" id="cz_img" name="cz_img">
                        <input style="display: none" type="text" id="remit_type" name="remit_type">
                    </div>

                    <div style="color: #0a8ddf;padding-top: 15px;float: right;padding-right: 6px;padding-bottom: 15px;" ><a href="/H5/chongzhiList">查看充值记录></a></div>

                </div>
                <button :on-click="@add" class="address_btn" style="margin-top: 0;">确 定</button>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/City.js' charset='utf-8'></script>
<script>
    var newAddress = avalon.define({
        $id: "chongzhi",
        user: "",
        phone: "",
        detail: "",
        cz_img: "",
        type: "",
        choose:0,
        account_0:'',
        account_1:'',
        remit_money_0:'',
        remit_money_1:'',
        back: function(){
            window.history.go(-1)
        },
        getCity: function(){
            Mall.request("/api/AreaDict")
                .always( function( data ){
                    if( data.error_code == 0 ){
                        var area = new LArea();
                        area.init({
                            'trigger': '#picker', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
                            'valueTo': '#value', //选择完毕后id属性输出到该位置
                            'keys': {
                                id: 'id',
                                name: 'name'
                            }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
                            'type': 1, //数据源类型
                            'data': data.data //数据源
                        });
                    }
                } )
        },

        newimg:function(){
            var a = document.getElementById('file');
            var img = document.getElementById('img');
            console.log(window.URL.createObjectURL(a.files[0]))
            img.src = window.URL.createObjectURL(a.files[0]);
//            alert(11111);
            var formData = new FormData();
            formData.append('kcs_uploader_file', $('#file')[0].files[0]);
            /*if(!formData.kcs_uploader_file){
             console.log(formData.kcs_uploader_file)
             window.localStorage.setItem('imghas','none')
             }else{
             console.log(formData.kcs_uploader_file)
             window.localStorage.setItem('imghas','has')
             }*/
            if(!formData.kcs_uploader_file){
                window.localStorage.setItem('imghas','none')
            }
            formData.append('api_token', this.token);
            if($('#file')[0].files[0].size<1024*1024*4){
                $.ajax({
                    url : '/api/Upload',//这里写你的url
                    type : 'POST',
                    data : formData,
                    contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                    processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
                    dataType: 'json',//这里是返回类型，一般是json,text等
                    clearForm: true,//提交后是否清空表单数据
                    success: function(data) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。

                        if( data.error_code == 0 ){
                            $("#cz_img").val(data.data.avatar_url);
                            $.toast( '上传成功', 2000, "warning" );
                        }else{
                            $.toast( '上传失败', 2000, "warning" );
                        }

                        /*vm.cz_img = data.data.avatar_url;
                        vm.imgmsg = $('#file')[0].files[0].name;
                        setTimeout(function () {
                            vm.display = true;
                        },2000);
                        vm.isit = true;*/
                    },
                    error: function(data, status, e) {  //提交失败自动执行的处理函数。
                        $.alert(e);
                        $.hidePreloader();
                    }
                });
            }

        },
        add:function(){
            var msg = "";
            if( Mall.LOCK ){
                return
            }
            var account='';
            var remit_money='';
            var cz_img = $("#cz_img").val();
            if(!cz_img) msg = "请上传截图";
            if(newAddress.choose ==0){
               /* if( !newAddress.account_0 ){
                    msg = "请填写支付宝账号"
                }*/

                if( !newAddress.remit_money_0 ){
                    msg = "请输入充值金额"
                }
//                account = newAddress.account_0;
                remit_money = newAddress.remit_money_0;
            }

            if(newAddress.choose ==1){
               /* if( !newAddress.account_1 ){
                    msg = "请填写微信账号"
                }*/

                if( !newAddress.remit_money_1 ){
                    msg = "请输入充值金额"
                }

//                account = newAddress.account_1;
                remit_money = newAddress.remit_money_1;
            }

            if( msg ){
                $.toast( msg, 2000, "warning" );
                return
            }
            var postData = {
                cz_img: cz_img,
//                account: account,
                remit_money: remit_money,
                type: newAddress.choose
            };
            Mall.LOCK = true;
            Mall.request( "/api/CzSubmit", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                        var url = window.location.href;
                        $.toast( "操作成功", 1000, "success");
                    }
                    Mall.LOCK = false;
                } )
        }
    })
    newAddress.getCity();
    avalon.scan( document.body );
</script>
</body>
</html>
